<template>
  <div class="system-account">
    <a-card style="width: 100%">
      <div class="filter">
        <div class="form">
          <a-input
            v-model:value="searchValue"
            placeholder="请输入账号"
            style="width: 240px"
          ></a-input>
        </div>
        <div class="action-btns">
          <a-space>
            <a-button type="primary" @click="getUserList">查询</a-button>
            <a-button v-permission="['管理者']" @click="openAddModal()">新增</a-button>
          </a-space>
        </div>
      </div>
    </a-card>
    <div class="content">
      <a-card style="width: 100%">
        <a-table
          :dataSource="userList"
          :columns="columns"
          :pagination="{ onChange: handlePageChange, total: pageInfo.total }"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button type="link" @click="ban(record)">禁用</a-button>
                <a-button v-permission="['管理者']" type="link" @click="openAddModal(record)"
                  >编辑</a-button
                >
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
    <!-- 弹窗 -->
    <Add ref="addModal" @refresh="getUserList"></Add>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Add from './components/add.vue'
import { fetchUserList, fetchEnableUser } from '@/api/system'

const searchValue = ref('')
const pageInfo = ref({
  page: 1,
  pageSize: 10,
  total: 0
})
onMounted(() => {
  getUserList()
})
const getUserList = async () => {
  const params = {
    page_num: pageInfo.value.page,
    conditions: [
      {
        key: 'account',
        operator: 'like',
        value: searchValue.value
      }
    ],
    page_size: pageInfo.value.pageSize,
    order_info: {
      key: 'create_time',
      order: 'desc'
    }
  }
  const res = await fetchUserList(params)
  userList.value = res.data.data
  pageInfo.value.total = res.data.paging.total
}
const userList = ref<any[]>([])
const columns = [
  {
    title: '序号',
    align: 'center',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '账号',
    align: 'center',
    dataIndex: 'account',
    key: 'account'
  },
  {
    title: '用户',
    align: 'center',
    dataIndex: 'user_name',
    key: 'user_name'
  },
  {
    title: '角色',
    align: 'center',
    dataIndex: 'role_name',
    key: 'role_name'
  },
  {
    title: '状态',
    align: 'center',
    dataIndex: 'status_str',
    key: 'status_str'
  },
  {
    title: '操作',
    align: 'center',
    dataIndex: 'action',
    width: 120,
    key: 'action'
  }
]

const handlePageChange = (page: number, pageSize: number) => {
  pageInfo.value.page = page
  pageInfo.value.pageSize = pageSize
  getUserList()
}

const ban = async (item: any) => {
  const params = {
    account: item.account,
    conditions: [
      {
        key: '',
        order: ''
      }
    ],
    create_time: '',
    id: item.id,
    order_info: {
      key: '',
      order: ''
    },
    page_num: 0,
    page_size: 0,
    password: '',
    status: item.status_str == '禁用' ? '1' : '0',
    token: '',
    update_time: '',
    user_name: item.user_name
  }
  const res = await fetchEnableUser(params)
  if (res.status === 200) await getUserList()
}

// 编辑
const addModal = ref()
const openAddModal = (record?: any) => {
  addModal.value.openModal(record)
}
</script>

<style scoped lang="scss">
.system-account {
  .filter {
    display: flex;
    justify-content: space-between;
  }

  .content {
    margin-top: 24px;
  }
}
</style>
